<template>
    <div> 
      <div style="display: flex; margin: 15px 0">
        <!-- <el-card style="width: 50%; margin-right: 10px">
          <div style="margin-bottom: 15px; font-size: 20px; font-weight: bold">系统公告</div>
          <el-timeline style="padding: 0">
            <el-timeline-item v-for="item in notices" :key="item.id" :timestamp="item.time" placement="top">
              <el-card>
                <h4>{{ item.title }}</h4>
                <p>{{ item.content }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-card> -->
  
        <el-card style="width: 90%">
          <div style="margin-bottom: 15px; font-size: 20px; font-weight: bold">系统公告</div>
          <el-collapse v-model="activeName" accordion>
            <el-collapse-item  v-for="(item, index) in notices" :key="item.id" :name="index + ''">
              <template slot="title">
                <h4>{{ item.title }}</h4>
                <span style="margin-left: 5px; margin-right: 5px;">|</span> <!-- 添加分隔符 -->
                <p>{{ formatDate(item.time) }}</p>
              </template>
              <div>{{ item.content }}</div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </div>
  
    </div>
  </template>
  
  <script>
  export default {
    name: "Home",
    data() {
      return {
        user: JSON.parse(localStorage.getItem('honey-user') || '{}'),
        notices: [],
        activeName: '0'
      }
    },
    created() {
      this.loadNotice()
    },
    methods: {
      loadNotice() {
        this.$request.get('/notice/selectData').then(res => {
            this.notices = res.data.map(item => ({
          ...item,
          time: this.formatDate(item.time)}));
        })
      },
      formatDate(time) {
      // 将时间字符串转换为 Date 对象
      const date = new Date(time);
      // 格式化时间为 YYYY-MM-DD HH:mm:ss
      const formattedDate = `${date.getFullYear()}-${this.padZero(date.getMonth() + 1)}-${this.padZero(date.getDate())} ${this.padZero(date.getHours())}:${this.padZero(date.getMinutes())}:${this.padZero(date.getSeconds())}`;
      return formattedDate;
    },
    padZero(num) {
      return num < 10 ? '0' + num : num; // 在个位数前面补零
    }
    }
  }
  </script>
  
  <style scoped>
  
  </style>